import React, { Component } from 'react';
import './App.scss';

class App extends Component {
  state={
    mobileValue:'',
    yz_code:'',
    checked:'',
    error_msg:""
  }

  // mobileChange=(e)=>{
  //   this.setState({
  //     mobileValue:e.target.value
  //   })
  // }
  // yzChange=(e)=>{
  //   this.setState({
  //     yz_code:e.target.value
  //   })
  // }
  // checkChange=(e)=>{
  //   this.setState({
  //     checked:e.target.checked
  //   })
  // }
//上面的来一个简写,不过就要传参数了，
//穿的参数是input的类型,还有传key,

handleChange=(e)=>{
let {type,key}=e.target.dataset;
let value='';
if(type==='checkbox'){
  value=e.target.checked
}else{
  value=e.target.value
}
this.setState({
  [key]:value
})
}


validateMobile=(mobileValue)=>{
  if(!mobileValue){
this.setState({
  error_msg:'手机不能为空'
})
return false;
  }
  if(!/^1[0-9]{10}$/.test(mobileValue)){
    this.setState({
      error_msg:'格式有误'
    })
    return false;
  }
  
}

  handleSubmit=()=>{
   let mobileValue=this.state.mobileValue
//尽享验证
   let valid=this.validateMobile(mobileValue)

  }
  render() {
    return (
      <div className='login'>
        <div className="login-moblie">
         <input type="number" placeholder="请输入电话号码" 
         data-type='number'
         data-key='mobileValue'
         onChange={this.handleChange}
         value={this.state.mobileValue}
         />
        
        </div>
        <div className="logon-yz">
          <input type="number" 
          placeholder="请输入验证码"
          data-type='number'
          data-key='yz_code'
          value={this.state.yz_code}
          onChange={this.handleChange}
          />
          <button>获取验证码</button>
        </div>
        <p>{this.state.error_msg}</p>
        <div className="login-btn" onClick={this.handleSubmit}>
         登录
        </div>
        <div className="login-policy">
        <input type="checkbox"
        data-type='checkbox'
        data-key='checked'
        value={this.state.checked}
        onChange={this.handleChange}
        />
        <span>我同意{"<<"}</span>
          <a href="#">服务条框</a>
          {">>"}
          <span>和</span>
          {"<<"}
          <a href="#">网易隐私政策</a>
          {">>"}
        </div>
        
      </div>
    );
  }
}

export default App;